<template>
	<view>
		<view class="list-box">
			<view class="list-box-title">
				<view class="item_view">{{$t('my.community8')}}</view>
				<view class="item_view">{{$t('my.community1')}}</view>
				<view class="item_view">{{$t('my.community2')}}</view>
				<view class="item_view">{{$t('my.community3')}}</view>
				<view class="item_view">{{$t('my.community4')}}</view>
			</view>
			<view class="item">
				<view class="item_view">{{columns.level || 'v0'}}</view>
				<view class="item_view">{{Number(columns.stakingNum || 0).toFixed(2) || 0}}</view>
				<view class="item_view">{{Number(columns.teamStaking || 0).toFixed(2) || 0}}</view>
				<view class="item_view">{{Number(columns.maxCommunity || 0).toFixed(2) || 0}}</view>
				<view class="item_view">{{Number(columns.sumMinCommunity || 0).toFixed(2) || 0}}</view>
			</view>
		</view>
		
		<view class="tab-box">
			<view class="left-box">
				<text :class="activeMarketId == item.id ? 'active' : ''" v-for="item in typeList" @click="getMemberTeamFn(item.id)">{{item.name}}</text>
			</view>
			<view class="right-box">
			</view>
		</view>
		
		<view class="list-box">
			<view class="list-box-title">
				<view class="item_view" style="width: 420rpx">{{$t('my.community5')}}</view>
				<view class="item_view">{{$t('my.community6')}}</view>
				<view class="item_view" style="width: 420rpx;">{{$t('my.community7')}}</view>
			</view>
			<z-paging ref="paging" v-model="dataList" @query="queryList" :use-page-scroll="true">
				<view class="item" v-for="(item,index) in dataList">
					<view class="item_view" style="width: 420rpx">{{item.address}}</view>
					<view class="item_view">{{item.stakingNum}}</view>
					<view class="item_view" style="width: 420rpx;">{{timeFormat(item.createTime,'yyyy年mm月dd日 hh:MM:ss')}}</view>
				</view>
			</z-paging>
		</view>
		

		<view class="bottom-box"></view>
	</view>
</template>

<script setup>
	import { timeFormat } from '@/uni_modules/uview-plus';
	import {getMemberTeam} from '@/common/api/common.js'
	import {ref} from 'vue';
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useI18n } from 'vue-i18n';
	const {t} = useI18n();

	const typeList = ref([
		{name: t('my.zt'),id: 'zt'},
		{name: t('my.jt'),id: 'jt'},
	]);
	const paging = ref(null)
	const dataList = ref([])
	
	const activeMarketId = ref('zt');
	const columns = ref({});
	
	const queryList = (pageNo, pageSize) => {
		let params = {
			type: activeMarketId.value,
			page: pageNo - 1,
			pageSize: pageSize
		}
		getMemberTeam(params).then(res => {
			if(res.status == 0) {
				res.result.teamMember.map(item => {
					let prefix = item.address.slice(0, 4);
					let suffix = item.address.slice(-6); 
					  
					// 使用前缀、'***' 和后缀来构造新的字符串  
					item.address = prefix + '***' + suffix; 
				})
				columns.value = res.result;
				paging.value.complete(res.result.teamMember);
			}else {
				paging.value.complete(false);
			}
		}).catch(res => {
			// 如果请求失败写paging.value.complete(false)，会自动展示错误页面
			// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
			// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
			paging.value.complete(false);
		})
	}

	const getMemberTeamFn = async (id) => {
		activeMarketId.value = id
		paging.value.reload();
	}
	

	const goPage = url => {
		uni.navigateTo({
			url: url
		})
	}

	onLoad(() => {
		// getMemberTeamFn(1);
	})
	onShow(() => {
		
	})
</script>

<style lang="scss" scoped>
	.tab-box {
		width: calc(100% - 80rpx);
		margin: 40rpx auto 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	
		.left-box {
			text {
				margin-right: 40rpx;
				color: #1f1f1f80;
			}
	
			.active {
				color: #1f1f1f;
			}
		}
	
		.right-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
	.list-box {
		padding: 20rpx 20rpx;
		background: #f5f5f5;
		border-radius: 10rpx;
		margin: 40rpx;
		
		.list-box-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			border-bottom: 0.5rpx solid rgba(31, 31, 31, 0.5);
			padding-bottom: 20rpx;
			// color: #1f1f1f80;
		}
		
		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			padding: 20rpx 0;
			text-align: center;
		}
		.item_view {
			text-align: center;
			width: 100%;
			// font-weight: 900;
			color: rgba(31, 31, 31, 0.5);
		}

		// .item {
		// 	width: 49%;
		// 	padding: 30rpx 40rpx;
		// 	margin-bottom: 20rpx;
		// 	box-sizing: border-box;
		// 	background: #f5f5f5;
		// 	border-radius: 16rpx;
		// 	display: flex;
		// 	justify-content: space-between;

		// 	.logo-box {
		// 		// display: flex;
		// 		align-items: flex-start;
		// 		font-size: 32rpx;
		// 		text {
		// 			font-size: 24rpx;
		// 			color: #1f1f1f80;
		// 		}
		// 	}

		// 	view:last-child {
		// 		text-align: center;
		// 		width: 100%;
		// 		font-size: 32rpx;
		// 		font-weight: 900;

		// 		text {
		// 			font-size: 24rpx;
		// 			// color: #1f1f1f80;
		// 		}
		// 	}
		// }
	}
</style>